<template>
  <el-dialog title="预览文章" :visible="previewDialog" @close="handleClose">
    <div class="title">
      <h2>{{ artDetail.title }}</h2>
      <div>
        <span>{{ artDetail.createTime | parseTimeByString }}</span>
        <span>{{ createName }}</span>
        <i class="el-icon-view"></i>
        <span>{{ artDetail.visits }}</span>
      </div>
    </div>
    <div class="content" v-html="artDetail.articleBody">
    </div>
  </el-dialog>
</template>

<script>
import { detail as artDetail } from '@/api/hmmm/articles'
import { detail } from '@/api/base/users'
export default {
  name: 'ArticlePreview',
  props: {
    previewDialog: {
      type: Boolean,
      default: false
    },
    artId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      artDetail: {}, // 文章详情
      createName: null // 文章作者
    }
  },
  async created () {
    await this.getArtDetail()
    this.getUserDetail()
  },
  methods: {
    handleClose () {
      this.$emit('update:previewDialog', false)
    },
    async getArtDetail () {
      const { data } = await artDetail({ id: this.artId })
      this.artDetail = data
      // console.log(data)
    },
    async getUserDetail () {
      const { data: { username } } = await detail({ id: this.artDetail.creatorID })
      // console.log(username)
      this.createName = username
    }
  }
}
</script>

<style scoped lang='scss'>
.content{
  padding: 10px;
  background-color: #f5f5f5;
  border-top: 1px dotted #cecece;
}
.title{
  padding-bottom: 10px;
  span{
    margin-right: 10px;
  }
  i{
    margin-right: 10px;
  }
}
</style>
